<!--
 * @Author: zqg
 * @Date: 2021-01-10 23:12:18
 * @LastEditors: zqg
 * @LastEditTime: 2021-03-15 13:59:19
 * @Description: 新增/编辑考核规则-条件规则内容
-->
<template>
  <el-form
    :model="addAppraisalQuery"
    :rules="rules"
    ref="formRef"
    label-width="100px"
    class="demo-ruleForm"
    label-position="right"
  >
    <el-form-item
      label="条件:"
      required
    >
      <el-row :gutter="10">
        <el-col
          :span="5"
          v-if="ruleType === assessmentTypeInfo.ordinary.type"
        >
          <el-form-item
            label-width="0"
            prop="ruleCondition"
          >
            <el-select
              v-model="addAppraisalQuery.ruleCondition"
              @change="ruleConditionChange"
            >
              <el-option
                v-for="item in conditions"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item
            label-width="0"
            prop="ruleScope"
          >
            <el-select
              v-model="addAppraisalQuery.ruleScope"
              @change="ruleScopeChange"
            >
              <el-option
                v-for="item in ruleScopeOption"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-col v-show="addAppraisalQuery.ruleScope !== valueScope.value">
            <el-form-item
              label-width="0"
              prop="ruleValue"
            >
              <el-input
                v-model="addAppraisalQuery.ruleValue"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col v-show="addAppraisalQuery.ruleScope === valueScope.value">
            <el-col :span="10">
              <el-form-item
                label-width="0"
                prop="min"
              >
                <el-input
                  v-model="addAppraisalQuery.min"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col
              class="line"
              :span="4"
            >至</el-col>
            <el-col :span="10">
              <el-form-item
                label-width="0"
                prop="max"
              >
                <el-input
                  v-model="addAppraisalQuery.max"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
          </el-col>
        </el-col>
        <el-col
          :span="5"
          v-if="ruleType === assessmentTypeInfo.ordinary.type"
        >
          <el-form-item
            label-width="0"
            prop="ruleUnit"
          >
            <el-select v-model="addAppraisalQuery.ruleUnit">
              <el-option
                v-for="item in conditionsUnitOption"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>
  </el-form>
</template>

<script>
import {
  performanceAssessmentTypes,
  conditions,
  getRuleScopeOption,
  getConditionsUnitOption,
  valueScope
} from '@/utils/performance'
import { deepClone } from '@/utils/index'
export default {
  components: {},
  data() {
    return {
      addAppraisalQuery: {
        // 条件
        ruleCondition: '',
        // 规则范围
        ruleScope: '',
        // 规则单位
        ruleUnit: '',
        // 规则值
        ruleValue: '',
        min: '',
        max: ''
      },
      // 考核类型
      assessmentTypeInfo: performanceAssessmentTypes,
      // 条件规则类型枚举
      conditions,
      // 范围值枚举信息
      valueScope
    }
  },
  props: {
    // 考核类型
    ruleType: {
      type: Number,
      default: 0
    },
    // 新增规则信息详情
    rulesDetail: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    addAppraisalQuery: {
      handler(info) {
        const obj = deepClone(info)
        if (obj.ruleScope === this.valueScope.value) {
          obj.ruleValue = info.min + '-' + info.max
        }
        delete obj.min
        delete obj.max
        this.$emit('change', obj)
      },
      deep: true
    }
  },
  computed: {
    /**
     * @description: 条件规则范围选项列表
     * @param {*}
     * @return {*}
     */
    ruleScopeOption() {
      return getRuleScopeOption(this.addAppraisalQuery.ruleCondition)
    },
    /**
     * @description: 条件规则单位列表
     * @param {*}
     * @return {*}
     */
    conditionsUnitOption() {
      const addAppraisalQuery = this.addAppraisalQuery
      return getConditionsUnitOption(
        addAppraisalQuery.ruleCondition,
        addAppraisalQuery.ruleScope
      )
    },
    // 验证规则
    rules() {
      return {
        ruleCondition: [
          {
            required:
              this.ruleType ===
              this.assessmentTypeInfo.ordinary.type,
            message: '请选择条件'
          }
        ],
        ruleScope: [
          {
            required: true,
            message: '请选择指条件范围'
          }
        ],
        ruleUnit: [
          {
            required: true,
            message: '请选择单位'
          }
        ],
        ruleValue: [
          {
            required:
              this.addAppraisalQuery.ruleScope !== this.valueScope.value,
            message: '请输入内容'
          }
        ],
        min: [
          {
            required:
              this.addAppraisalQuery.ruleScope === this.valueScope.value,
            message: '请输入内容'
          }
        ],
        max: [
          {
            required:
              this.addAppraisalQuery.ruleScope === this.valueScope.value,
            message: '请输入内容'
          }
        ]
      }
    }
  },
  created() {
    Object.keys(this.addAppraisalQuery).forEach(key => {
      if (this.rulesDetail.hasOwnProperty(key) && this.rulesDetail[key]) {
        this.$set(this.addAppraisalQuery, key, this.rulesDetail[key])
      }
    })
    if (this.addAppraisalQuery.ruleScope === this.valueScope.value) {
      const ruleValueList = this.addAppraisalQuery.ruleValue.split('-')
      this.$set(this.addAppraisalQuery, 'min', ruleValueList[0] || '')
      this.$set(this.addAppraisalQuery, 'max', ruleValueList[1] || '')
    }
  },
  methods: {
    /**
     * @description: 条件修改时处理
     * @param {*}
     * @return {*}
     */
    ruleConditionChange() {
      this.$set(this.addAppraisalQuery, 'ruleScope', '')
      this.ruleScopeChange()
    },
    /**
     * @description: 条件范围修改时处理
     * @param {*}
     * @return {*}
     */
    ruleScopeChange() {
      this.$set(this.addAppraisalQuery, 'ruleValue', '')
      this.$set(this.addAppraisalQuery, 'min', '')
      this.$set(this.addAppraisalQuery, 'max', '')
      this.$set(this.addAppraisalQuery, 'ruleUnit', '')
    },
    /**
     * @description: 表单验证
     * @return {Promise<Boolean>}
     */
    validate() {
      return new Promise(resolve => {
        this.$refs.formRef.validate(valid => {
          resolve(valid)
        })
      })
    }
  }
}
</script>
